
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>生产过程管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../css/layui.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">生产过程管理系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                    tester
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">个人设置</a></dd>
                    <dd><a href="javascript:;">退出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">

            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul class="layui-nav layui-nav-tree" lay-filter="test">
					<li class="layui-nav-item">
						<a class="" href="javascript:;">人员信息管理</a>
						<dl class="layui-nav-child">
							<dd><a href="javascript:goPage('person_list.html');">人员信息管理</a></dd>
							<dd><a href="javascript:goPage('');">人员信息编辑</a></dd>
						</dl>
					</li>
					<li class="layui-nav-item">
						<a href="javascript:;">物料信息管理</a>
						<dl class="layui-nav-child">
							<dd><a href="javascript:goPage('material_list.html');">物料信息管理</a></dd>
							<dd><a href="javascript:goPage('');">物料信息编辑</a></dd>
						</dl>
					</li>
					<li class="layui-nav-item">
						<a href="javascript:;">设备信息管理</a>
						<dl class="layui-nav-child">
							<dd><a href="javascript:goPage('device_list.html');">设备信息管理</a></dd>
							<dd><a href="javascript:;">设备信息编辑</a></dd>
						</dl>
					</li>
					<li class="layui-nav-item layui-nav-itemed">
						<a href="javascript:;">产品型号管理</a>
						<dl class="layui-nav-child">
							<dd><a href="javascript:goPage('product_list.html');">产品信息管理</a></dd>
							<dd><a href="javascript:goPage('');">产品信息编辑</a></dd>
						</dl>
					</li>
				</ul>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <blockquote class="layui-elem-quote layui-text">
                <span class="layui-breadcrumb">
                  <a href="">产品信息</a>
                  <a><cite>产品信息管理</cite></a>
                </span>
            </blockquote>

            <!-- 查询条件表单  -->
            <form class="layui-form layui-row layui-col-space16" action="<%=request.getContextPath()%>/product/list">
                <div class="layui-col-md2">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="productCode"  placeholder="产品身份码" class="layui-input" lay-affix="clear" value="">
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="productName"  placeholder="产品名称" class="layui-input" lay-affix="clear" value="">
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="worker"  placeholder="加工人员" class="layui-input" lay-affix="clear" value="">
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-date"></i>
                        </div>
                        <input type="text" id="processingDate" name="processingDate" placeholder="加工时间" class="layui-input demo-table-search-date" lay-verify="date">
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="workshop"  placeholder="加工车间" class="layui-input" lay-affix="clear" value="">
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-input-wrap">
                        <button class="layui-btn" lay-submit lay-filter="demo-table-search">查询</button>
                        <a href="javascript:void(0)" id="btn_product_add" class="layui-btn layui-bg-blue">添加</a>
                    </div>
                </div>
            </form>
            <!--
                列表展示
            -->
            <table class="layui-table" id="product-table-search"></table>


        </div>
    </div>
</div>
<!-- 底部页脚部分 -->
<div class="footer">
    <p class="text-center">
        2024 &copy;
    </p>
</div>


</body>

<div id="editBox" style="display: none;">
    <form class="layui-form" lay-filter='product-form' action="#">
        <div class="layui-inline">
            <label class="layui-form-label width120">产品身份码 </label>
            <div class="layui-input-inline">
                <input type="text" name="product_code" lay-verify="required" placeholder="请输入产品身份码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width120">产品名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="product_name" lay-verify="required" placeholder="请输入产品名称" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width120">外观尺寸</label>
                <div class="layui-input-inline">
                    <input type="text" name="product_size" lay-verify="required" placeholder="请输入外观尺寸" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width120">批次</label>
                <div class="layui-input-inline">
                    <input type="number" name="batch" lay-verify="required" placeholder="请输入批次" autocomplete="off" class="layui-input" min="1" step="1" lay-affix="number">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width120">加工人员</label>
                <div class="layui-input-inline">
                    <input type="text" name="worker" lay-verify="required" placeholder="请输入加工人员" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width120">加工方法</label>
                <div class="layui-input-inline">
                    <input type="text" name="processing_method" lay-verify="required" placeholder="请输入加工方法" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width120">加工时间</label>
                <div class="layui-input-inline layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-date"></i>
                    </div>
                    <input type="text" name="processing_date" id="processing_date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width120">加工车间</label>
                <div class="layui-input-inline">
                    <input type="text" name="workshop" lay-verify="required" placeholder="请输入加工车间" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="form-submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
        <a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="delete">删除</a>
    </div>
</script>
<script type="text/javascript" src="../js/layui.js"></script>
<script>
    layui.use( function(){
        var laydate = layui.laydate;
        var dropdown = layui.dropdown;
        var $ = layui.$;
        var layer = layui.layer;
        var util = layui.util;
        var table = layui.table;
        var form = layui.form;

        // 渲染
        laydate.render({
            elem: '#processingDate'
        });

        // 创建表格实例
        let mainTable = table.render({
            id: 'test1',
            elem: '#product-table-search',
            url: 'http://localhost:8888/listProduct', // 此处为静态模拟数据，实际使用时需换成真实接口
            method: 'post',
            headers: {'Access-Control-Allow-Origin': '*'},
            cols: [[
                {type: 'checkbox', title: '', fixed: true}, // 单选框
                {field:'id', title: 'ID', width:60, sort: true, fixed: true},
                {field:'productCode', title: '产品身份码', minWidth:100, sort: true},
                {field:'productName', title: '产品名称', minWidth:120},
                {field:'productSize', title: '外观尺寸', width: 100},
                {field:'batch', title: '批次', width:50},
                {field:'worker', title: '加工人员', width: 100},
                {field:'processingMethod', title: '加工方法', width: 100},
                {field:'processingDate', title: '加工时间', minWidth: 150},
                {field:'workshop', title: '加工车间', sort: true, width:120},
                {fixed: 'right', title:'操作', minWidth: 125, toolbar: '#barDemo'}
            ]],

            page: true,
            height: 'full'
        });

        // 触发单元格工具事件
        table.on('tool(test1)', function(obj){ // 双击 toolDouble
            var rowData = obj.data; // 获得当前行数据
            if(obj.event === 'update'){
                let editBox = layer.open({
                    title: `<button type="button" class="layui-btn layui-bg-gray">
						<i class="layui-icon layui-icon-edit layui-font-12"></i> <b>产品信息编辑</b> 
					  </button>
				`,
                    type: 1,
                    area: ['600px','500px'],
                    content: $('#editBox').html(),
                    success: function(){
                        // 对弹层中的表单进行初始化渲染
                        form.render();
                        // 表单提交事件
                        form.on('submit(form-submit)', function(data){
                            var field = data.field; // 获取表单字段值
                            // 显示填写结果，仅作演示用
                            // layer.alert(JSON.stringify(field), {
                            //   title: '当前填写的字段值'
                            // });
                            // // 此处可执行 Ajax 等操作
                            // var data = layui.form.val('product-form');
                            console.log(field)
                            $.ajax({
                                url: "http://localhost:8888/saveProduct",
                                type: "post",
                                headers: {'Access-Control-Allow-Origin': '*'},
                                // datatype: "json",
                                data: {
                                    id: rowData.id,
                                    productCode: field.product_code,
                                    productName: field.product_name,
                                    productSize: field.product_size,
                                    batch: field.batch,
                                    worker: field.worker,
                                    processingDate: field.processing_date,
                                    processingMethod: field.processing_method,
                                    workshop: field.workshop
                                },
                                success: function (e) {
                                    layer.msg('操作成功！');
                                    // console.log(e);
                                    layer.close(editBox);   // 关闭对话框
                                    mainTable.reload(); // 重新加载表格数据
                                }

                            });
                            return false; // 阻止默认 form 跳转
                        });
                    }
                });
                laydate.render({
                    elem: '#processing_date'
                });
                console.log(rowData)
                //对表单元素进行赋值
                layui.form.val('product-form', {
                    "id": rowData.id,
                    "product_code": rowData.productCode,
                    "product_name": rowData.productName,
                    "product_size": rowData.productSize,
                    "batch": rowData.batch,
                    "worker": rowData.worker,
                    "processing_method": rowData.processingMethod,
                    "processing_date": rowData.processingDate,
                    "workshop": rowData.workshop
                });

            } else if(obj.event === 'delete'){
                layer.confirm('确定要删除该行数据吗？', function(index){
                    $.ajax({
                        url: "http://localhost:8888/delProduct",
                        type: "post",
                        // datatype: "json",
                        data: {
                            id: rowData.id,
                        },
                        success: function (e) {
                            layer.msg('操作成功！');
                            // console.log(e);
                            mainTable.reload(); // 重新加载表格数据
                        }
                    });
                });
            }
        });

        // 搜索提交
        form.on('submit(demo-table-search)', function(data){
            var field = data.field; // 获得表单字段
            // 执行搜索重载
            table.reload('test1', {
                page: {
                    curr: 1 // 重新从第 1 页开始
                },
                where: field // 搜索的字段
            });
            layer.msg('搜索成功<br>');
            return false; // 阻止默认 form 跳转
        });

        // 添加按钮的处理
        $('#btn_product_add').click(function(){
            let editBox = layer.open({
                title: `<button type="button" class="layui-btn layui-bg-gray">
					<i class="layui-icon layui-icon-edit layui-font-12"></i> <b>产品信息添加</b> 
				  </button>
			`,
                type: 1,
                area: ['600px','500px'],
                content: $('#editBox').html(),
                success: function(){
                    // 对弹层中的表单进行初始化渲染
                    form.render();
                    // 表单提交事件
                    form.on('submit(form-submit)', function(data){
                        var field = data.field; // 获取表单字段值
                        // 显示填写结果，仅作演示用
                        // layer.alert(JSON.stringify(field), {
                        //   title: '当前填写的字段值'
                        // });
                        // 此处可执行 Ajax 等操作
                        // var data = layui.form.val('product-form');
                        console.log(data);
                        $.ajax({
                            url: 'http://localhost:8888/saveProduct',
                            method: 'GET',
                            datatype: 'json',
                            data: {
                                productCode: field.product_code,
                                productName: field.product_name,
                                productSize: field.product_size,
                                batch: field.batch,
                                worker: field.worker,
                                processingDate: field.processing_date,
                                processingMethod: field.processing_method,
                                workshop: field.workshop
                            },
                            success: function (e) {
                                layer.msg('添加操作成功！');
                                // console.log(e);
                                layer.close(editBox);   // 关闭对话框
                                mainTable.reload(); // 重新加载表格数据
                            }
                        });
                        return false; // 阻止默认 form 跳转
                    });
                }
            });
            laydate.render({
                elem: '#processing_date'
            });
            var data = {
                "id": 0,
            };
            //对表单元素进行赋值
            layui.form.val('product-form', {
                "id": data.id,
                "product_code": data.product_code,
                "product_name": data.product_name,
                "product_size": data.product_size,
                "batch": data.batch,
                "worker": data.worker,
                "processing_method": data.processing_method,
                "processing_date": data.processing_date,
                "workshop": data.workshop
            });
        });
    });
</script>
<script>
    function remove(id) {
        if (confirm("确定是否要删除？")) {
            window.location.href = '/product/delete?id=' + id;
        }
    }
    function goPage(url) {
        window.location.href = url;
    }

</script>
</html>
